<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title>SlickGrid example 13: Indexed Sorting using Functional Data Provider</title>
  <link rel="stylesheet" href="../slick.grid.css" type="text/css"/>
  <link rel="stylesheet" href="examples.css" type="text/css"/>
  <style>
    html, body {
      margin: 0;
      padding: 0;
      background-color: White;
      overflow: auto;
    }

    body {
      font: 11px Helvetica, Arial, sans-serif;
    }

    #container {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
    }

    #description {
      position: fixed;
      top: 30px;
      right: 30px;
      width: 25em;
      background-color: beige;
      border: solid 1px gray;
      z-index: 1000;
    }

    #description h2 {
      padding-left: 0.5em;
    }
  </style>
</head>
<body>
<div id="container"></div>
<div id="description">
  <h2>Demonstrates:</h2>
  <ul>
    <li>Sorting grid items by an index</li>
    <li>Using the getItem method to provide data</li>
  </ul>
</div>

<script src="../lib/jquery-1.7.min.js"></script>
<script src="../lib/jquery.event.drag-2.2.js"></script>
<script src="../slick.core.js"></script>
<script src="../slick.grid.js"></script>

<script>
  var grid,
      data = [],
      columns = [
        { id: "title", name: "Title", field: "title", width: 240, sortable: true },
        { id: "c1", name: "Sort 1", field: "c1", width: 240, sortable: true },
        { id: "c2", name: "Sort 2", field: "c2", width: 240, sortable: true },
        { id: "c3", name: "Sort 3", field: "c3", width: 240, sortable: true }
      ],
      options = {
        enableCellNavigation: false,
        enableColumnReorder: false
      },
      numberOfItems = 25000, items = [], indices, isAsc = true, currentSortCol = { id: "title" }, i;

  // Copies and shuffles the specified array and returns a new shuffled array.
  function randomize(items) {
    var randomItems = $.extend(true, null, items), randomIndex, temp, index;
    for (index = items.length; index-- > 0;) {
      randomIndex = Math.round(Math.random() * items.length - 1);
      if (randomIndex > -1) {
        temp = randomItems[randomIndex];
        randomItems[randomIndex] = randomItems[index];
        randomItems[index] = temp;
      }
    }
    return randomItems;
  }

  /// Build the items and indices.
  for (i = numberOfItems; i-- > 0;) {
    items[i] = i;
    data[i] = {
      title: "Task ".concat(i + 1)
    };
  }
  indices = { title: items, c1: randomize(items), c2: randomize(items), c3: randomize(items) };

  // Assign values to the data.
  for (i = numberOfItems; i-- > 0;) {
    data[indices.c1[i]].c1 = "Value ".concat(i + 1);
    data[indices.c2[i]].c2 = "Value ".concat(i + 1);
    data[indices.c3[i]].c3 = "Value ".concat(i + 1);
  }

  // Define function used to get the data and sort it.
  function getItem(index) {
    return isAsc ? data[indices[currentSortCol.id][index]] : data[indices[currentSortCol.id][(data.length - 1) - index]];
  }
  function getLength() {
    return data.length;
  }

  grid = new Slick.Grid("#container", {getLength: getLength, getItem: getItem}, columns, options);
  grid.onSort.subscribe(function (e, args) {
    currentSortCol = args.sortCol;
    isAsc = args.sortAsc;
    grid.invalidateAllRows();
    grid.render();
  });
</script>
</body>
</html>